<template>
    <div>
      <h1>会员信息增加</h1>
      <table class="table table-bordered">
        <tbody>
            <tr>
                <td align="right">会员卡号</td>
                <td>
                    <input type="text" v-model="info.Cardid" disabled/>
                </td>
            </tr>
            <tr>
                <td align="right">手机号</td>
                <td>
                    <input type="text" v-model="info.Phone" maxlenght="11"/>
                </td>
            </tr>
            <tr>
                <td align="right">会员名称</td>
                <td>
                    <input type="text" v-model="info.Names"/>
                </td>
            </tr>
            <tr>
                <td align="right">会员级别</td>
                <td>
                    <select v-model="info.MemberLevel">
                        <option value="">请选择</option>
                        <option :value="item.LevelName" v-for="item in list">{{item.LevelName}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">会员生日</td>
                <td>
                    <input type="date" v-model="info.Birthday"/>
                </td>
            </tr>
            <tr>
                <td align="right">性别</td>
                <td>
                    <input type="radio" name="sex"  v-model="info.Sex" value="1"/>男
                    <input type="radio" name="sex" v-model="info.Sex" value="1"/>女
                </td>
            </tr>
            <tr>
                <td align="right">会员积分</td>
                <td>
                    <input type="text" v-model="info.JFnumber"/>
                </td>
            </tr>
            <tr>
                <td align="right">最低消费金额</td>
                <td>
                    <input type="text" v-model="info.MinMoney"/>
                </td>
            </tr>
            <tr>
                <td align="right">会员爱好</td>
                <td>
                    <input type="checkbox" name="likes"  v-model="info.Likes" value="唱"/>唱歌
                    <input type="checkbox" name="likes"  v-model="info.Likes" value="美"/>美女
                    <input type="checkbox" name="likes" v-model="info.Likes" value="喝"/>喝酒
                    <input type="checkbox" name="likes" v-model="info.Likes" value="睡"/>睡觉
                </td>
            </tr>
            <tr>
                <td align="right">简介</td>
                <td>
                    <textarea cols="50" rows="5" v-model="info.Desc"></textarea>
                </td>
            </tr>
            <tr>
                <td align="right"></td>
                <td>
                    <input type="button" value="更新" class="btn btn-danger" @click="ok"/>
                </td>
            </tr>
        </tbody>
      </table>
    </div>
</template>

<script setup lang="ts">
//响应式数据
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
//跳转
import {useRouter,useRoute} from 'vue-router';
//创建路由实现页面跳转
const router=useRouter();
//路由信息对象 作用接收参数
const route =useRoute();



//声明数据  2.进行双向绑定
let info:any=reactive({
    Memberid:route.query.Memberid,
  "Cardid": moment(new Date()).format('YYYYMMDD')+Math.random().toString().substring(2,5),
  "Phone": "",
  "Names": "",
  "MemberLevel": "",
  "Birthday": "",
  "Sex": 1,
  "JFnumber": '',
  "MinMoney": '',
  "Likes":[],
  "Desc": "",
});

//下拉框集合
const list=ref([{
    "Id": '',
    "LevelName": "",
}])
//文档就绪函数
onMounted(()=>{
    show();
    getdata();
})

//反填数据
const getdata=()=>{
    axios({
        url:'https://localhost:7193/api/Member/GetMemberdata',
        method:'get',
        params:{
            Memberid:route.query.Memberid,
        }
    })
    .then((res)=>{
        console.log(res);
        Object.assign(info,res.data);
        //对日期进行特殊处理
        info.Birthday=res.data.Birthday.substring(0,10);
        //对复选框进行处理   将字符串变成数组
        info.Likes=res.data.Likes.split(',');
    })
    .catch((err)=>{
        console.log(err);
    })
}
//获取会员等级列表
const show=()=>{
    axios.get('https://localhost:7193/api/Member/GetMemberLevelList').then(res=>{
        debugger
        res.data;
        list.value=res.data;
        
    })
}
//增加会员
const ok=()=>{
    //1.有效性验证
    if(info.Phon==''){
        alert('手机号不能为空');
        return;
    }
    let reg =/^1[3-9]\d{9}$/;
    if(reg.test(info.Phone)==false){
        alert('手机号格式不正确');
        return;
    }
    if(info.MemberName==''){
        alert('会员名称不能为空');
        return;
    }
    info.Likes=info.Likes.toString();
    console.log(info);
    //2.发送请求
    axios({
    url:'https://localhost:7193/api/Member/UpdateMember',
    method:'put',
    data:info,
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功');
            router.push('/memberlist');

        }
        else if(res.data==-1){
            alert('手机号重复');
            return;
        }
        else{
            alert('修改失败');
            return;
        }
        
    })
    .catch(err=>{
        console.log(err);
        
    })
    
}
    
</script>

<style scoped>

</style>